<template>
  <div>
    <a-month-picker v-model="currentQuarter" placeholder="请选择季度" format="YYYY 年第 Q 季度" @change="pickerChange">
      <template slot="monthCellContentRender" slot-scope="date,locale" >
        <span :class="'quarter-flag-'+moment(date).month()" style="display: none;">第{{moment(date).quarter()}}季度
          {{quarterCheck(moment(date).month())}}
        </span>
      </template>
    </a-month-picker>
  </div>
</template>

<script>
  import moment from 'moment'
  export default{
    name: 'JQuarter',
    props: {
      quarter: {
        type: Object,
        default: () => {}
      },
    },
    data(){
      return {
        currentQuarter: '',
      }
    },
    watch: {
      quarter:{
        handler(newVal){
          this.currentQuarter = newVal
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      moment,
      quarterCheck(i){
        if(i%3!==0){
          setTimeout(function () {
            if(document.getElementsByClassName('quarter-flag-'+i)[0]){
              document.getElementsByClassName('quarter-flag-'+i)[0]?.parentNode?.parentNode?.parentNode?.removeChild(document.getElementsByClassName('quarter-flag-'+i)[0]?.parentNode?.parentNode);
            }
          })
        }else{
          setTimeout(function () {
            document.getElementsByClassName('quarter-flag-' + i)[0].style.display = "block"
          })
        }
      },
      pickerChange(value){
        this.$emit('update:quarter', value)
      }
    },
  }
</script>

<style lang="less" scoped>
span{
  display: block;
}
</style>